<div class="container">
    <h1>HEROES</h1>
    <nav>
        <a routerLink="/detail/11">Details</a>
    </nav>
    <div>
        <label>Hero name:</label> <input #heroName />
        <button (click)="add(heroName.value); heroName.value=''">
            Add
        </button>
    </div>
    <ul class="heroes">
        <li *ngFor="let hero of heroes" (click)="onSelect(hero)"
            [class.selected]="hero === selectedHero">
            <span class="badge">{{hero.id}}</span>
            <span>{{hero.name}}</span>
            <button class="delete"
                    (click)="delete(hero); $event.stopPropagation()">x</button>
        </li>
    </ul>
    <div *ngIf="selectedHero">
        <h2>
            {{selectedHero.name | uppercase}} is my hero
        </h2>
        <button (click)="gotoDetail()">View Details</button>
    </div>
</div>